<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true" class="nav-custom">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">人员管理</block>
		</cu-custom>
		<view class="app-box" :style="{ height: appHeight + 'px' }">
			<view class="area-box-title">
				<view class="area-box" @click="$refs.treePicker._show()">
					<text class="mr10"> {{ form.deptName }}</text>
					<u-icon color="#607589" name="arrow-down-fill" size="20"></u-icon>

					<!-- <SelectArea
						v-model="form.areaCode"
						@change="changeCode"
						@confirm="confAreaCode"
						style="width: 145rpx"
					></SelectArea> -->
				</view>
				<view class="area-box">
					<listSelect
						v-model="form.status"
						:list="statusOptions"
						@confirm="confAreaCode"
						style="width: 135rpx"
					></listSelect>
				</view>
				<view class="search-box pr15">
					<u-input v-model="form.seachValue"></u-input>
					<u-icon name="search" color="#79A2C8" @click="initData"></u-icon>
				</view>
			</view>
			<view class="table-box">
				<s-table-page
					:columns="tableData.columns"
					:datas="tableData.datas"
					:sortKey="tableData.sortKey"
					@changeSort="changeSort"
					@customRow="customRow"
					:heightSv="appHeight - 190 + 'px'"
				>
					<template v-slot:choose="choose">
						<u-checkbox :value="choose.data.id == preItem_id" class="pl17"></u-checkbox>
						<!-- <view>{{ choose.data.nickName }}</view> -->
					</template>
					<template v-slot:status="item">
						{{ item.data.status == '0' ? '正常' : '停用' }}
						<!-- <view>{{ choose.data.nickName }}</view> -->
					</template>
				</s-table-page>
			</view>

			<view class="bot-ops">
				<view class="ops-sin" @click="addUer">
					<image src="@/static/image/user/add.png" mode="heightFix" class="imag" />
					<text class="text" style="color: #1f93ff">新增用户</text>
				</view>
				<view class="ops-sin" @click="editUer">
					<image src="@/static/image/user/edit.png" mode="heightFix" class="imag" />
					<text class="text" style="color: #1f93ff">编辑用户</text>
				</view>
				<view class="ops-sin" @click="editPass">
					<image src="@/static/image/user/edit.png" mode="heightFix" class="imag" />
					<text class="text" style="color: #1f93ff">修改密码</text>
				</view>
				<view class="ops-sin" @click="delUer">
					<image src="@/static/image/user/del.png" mode="heightFix" class="imag" />
					<text class="text" style="color: #ff6565">删除用户</text>
				</view>
			</view>
		</view>

		<ba-tree-picker
			ref="treePicker"
			:multiple="false"
			@select-change="selectChange"
			title="选择机构"
			:localdata="listData"
			:selectedData="selectedData"
			valueKey="id"
			textKey="name"
			childrenKey="children"
		/>
	</view>
</template>
<script>
	import SelectArea from '@/components/common/select/SelectArea.vue'
	import listSelect from '@/components/common/select/listSelect.vue'
	import userMagApi from '@/api/user/userMag'
	import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
	export default {
		name: 'personMag',
		components: {
			SelectArea,
			listSelect,
			baTreePicker
		},
		data() {
			return {
				appHeight: 0,

				form: {
					deptName: '',
					deptId: '',
					areaCode: '',
					status: 'all',
					seachValue: ''
				},
				statusOptions: [
					{ extra: 0, label: '全部', value: 'all' },
					{ extra: 1, label: '正常', value: '0' },
					{ extra: 2, label: '停用', value: '1' }
				],

				tableData: {
					sortKey: '',
					columns: [
						{ title: '选择', key: 'stnm', isClick: false, slotKey: 'choose', width: '80rpx' },
						{ title: '用户名', key: 'userName', isClick: false, width: '120rpx' },
						{ title: '昵称', key: 'nickName', isClick: false },
						{ title: '地区', key: 'deptName', isClick: false, width: '100rpx' },
						{ title: '状态', key: 'status', isClick: false, slotKey: 'status', width: '100rpx' },
						{ title: '手机号', key: 'phone', isClick: false, width: '180rpx' }
					],
					datas: []
				},

				preItem: null,
				// listData: [this.DeptTreeData[0]],
				selectedData: [this.UserInfoData.deptId]
			}
		},
		onShow() {
			if (this.form.deptName) {
				this.initData()
			}
		},
		computed: {
			preItem_id() {
				return this.preItem ? this.preItem.id : ''
			},
			listData() {
				let deptId = this.UserInfo.dept_id
				console.info(`this.DeptTreeData:`, this.DeptTreeData, this.UserInfo.dept_id)
				let item = this.findItemById(this.DeptTreeData, deptId)
				console.info(`item:`, item)
				if (item) {
					return [item]
				} else {
					return []
				}
			}
		},
		async mounted() {
			this.appHeight = await this.$getHeight('.nav-custom')
			this.form.deptName = this.UserInfoData.deptName
			this.form.deptId = this.UserInfoData.deptId
			this.initData()
		},
		methods: {
			// 输入id，找出id所在的项
			findItemById(tree, id) {
				// 遍历数组中的每一项
				for (let i = 0; i < tree.length; i++) {
					const item = tree[i]

					// 如果当前项的id匹配目标id，则返回当前项
					if (item.id === id) {
						return item
					}

					// 如果当前项有子项，则递归调用该函数在子项中查找目标id
					if (item.children && item.children.length > 0) {
						const found = this.findItemById(item.children, id)
						if (found) {
							return found
						}
					}
				}

				// 如果未找到匹配的项，则返回null
				return null
			},
			confAreaCode() {
				this.initData()
			},
			changeCode(value) {
				console.info(`value:`, value)
				this.initData()
			},
			async initData() {
				uni.showLoading({
					title: '正在加载'
				})
				const resp = await userMagApi
					.getlist({
						deptId: this.form.deptId,
						current: 1,
						size: 999
					})
					.catch((err) => {
						this.$hideLoading()
					})
				this.$hideLoading()
				const seachValue = this.form.seachValue
				const status = this.form.status
				let list = resp.data.filter((el) => {
					return (
						seachValue == '' ||
						el.nickName.indexOf(seachValue) > -1 ||
						el.phone.indexOf(seachValue) > -1 ||
						el.email.indexOf(seachValue) > -1
					)
				})
				list = list.filter((el) => {
					return status == 'all' || status == el.status
				})
				this.tableData.datas = list
				// .map((el) => {
				// 	el.checked = false
				// 	return el
				// })
			},

			customRow(item) {
				// this.tableData.datas.map((el) => {
				// 	el.checked = false
				// 	return el
				// })
				// item.checked = true
				this.preItem = item
				console.info(`item:`, item)
			},
			addUer() {
				this.$toUrl('/pages/user/person/addUser', { type: 'add', data: null })
				// uni.navigateTo({ url: '/pages/user/person/addUser' })
			},
			selectChange(ids, names) {
				this.form.deptName = names
				this.form.deptId = ids[0]
				this.initData()
			},
			editUer() {
				if (!this.preItem) {
					uni.showToast({
						icon: 'error',
						title: '请选择用户'
					})
					return
				}
				this.$toUrl('/pages/user/person/addUser', { type: 'edit', data: this.preItem })
			},
			editPass() {
				if (!this.preItem) {
					uni.showToast({
						icon: 'error',
						title: '请选择用户'
					})
					return
				}
				console.info(` this.preItem:`, this.preItem)
				this.$toUrl('/pages/user/person/modifySelfPass', { id: this.preItem.id })
			},
			delUer() {
				if (!this.preItem) {
					uni.showToast({
						icon: 'error',
						title: '请选择用户'
					})
					return
				}

				uni.showModal({
					title: '提示',
					content: '确定删除此人员？',
					showCancel: true,
					success: async ({ confirm, cancel }) => {
						if (confirm) {
							const resp = await userMagApi.removeToGet(this.preItem.id)
							if (resp.msg == 'success') {
								uni.showToast({
									icon: 'info',
									title: '操作成功'
								})
								this.yehuoDelUser(this.preItem)
								this.initData()
							} else {
								uni.showToast({
									icon: 'error',
									title: '操作失败'
								})
							}
						}
						console.info(`confirm, cancel :`, confirm, cancel)
					}
				})
			},
			async yehuoDelUser(h5user) {
				try {
					console.info(`h5user:`, h5user)
					uni.showLoading({
						title: '正在提交'
					})
					const resp = await userMagApi.yhlogin({
						account: 'admin',
						password: 'admin123'
					})
					const Authtoken = resp.headers.authtoken
					const root = await userMagApi.yhroot(Authtoken)
					let organizationId = root.data.result[0].id || 19
					console.info(`resp:`, root)
					const yeUserdata = await userMagApi.yhdelete(
						{
							destroyIMUser: true,
							employeeId: h5user.imId //野火id
						},
						Authtoken
					)

					if (resp2.msg == 'success') {
						uni.showLoading({
							title: '操作成功'
						})
					}
					this.$hideLoading()
				} catch (error) {
					uni.showLoading({
						icon: 'error',
						title: '操作失败'
					})
					this.$hideLoading()
				}
			}
		}
	}
</script>
<style lang="less">
	.app-box {
		position: relative;
		overflow: hidden;
		width: 750rpx;

		.area-box-title {
			width: 750rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 90rpx;
			padding: 0 15rpx;
			.area-box {
				width: 165rpx;
				height: 60rpx;
				flex-shrink: 0;
				border: 1rpx solid rgba(0, 133, 255, 0.7);
				background: #e4f2ff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 7rpx;
				padding-right: 10rpx;
			}
			.search-box {
				width: 330rpx;
				height: 60rpx;
				flex-shrink: 0;
				border-radius: 4rpx;
				border: 1rpx solid rgba(0, 133, 255, 0.7);
				background: #e4f2ff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 7rpx;
				padding-left: 10rpx;
			}
		}
		/deep/.table-box {
			width: 750rpx;
			display: flex;
			margin-top: 15rpx;
			justify-content: center;
			padding-bottom: 30rpx;
			flex-direction: column;
			align-items: center;
			// height: 82%;
			overflow: auto;
			.table-view-height-sv {
				height: 100%;
				overflow: auto;
			}
		}
		.bot-ops {
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 4px;
			border: 0.5px solid #dcdcdc;
			background: #fff;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
			display: flex;
			.ops-sin {
				width: 250rpx;
				height: 100%;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				// padding-right: 40rpx;
				.imag {
					position: absolute;
					height: 80%;
					z-index: 0;
					left: 0;
				}
				.text {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					white-space: nowrap;
				}
			}
		}
	}
</style>
